﻿<div class="navbar">
    <div class="navbar-brand" title="MusicX"></div>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@(this.collapseNavMenu?"collapse":null)" @onclick="ToggleNavMenu">
    <EditForm Model="searchModel" OnValidSubmit="Search" class="form-inline mt-2">
        <InputText class="form-control mr-2 ml-1 nav-search-input" type="search" placeholder="Search" aria-label="Search" @bind-Value="searchModel.SearchTerms" />
        <button class="btn btn-success" type="submit"><i class="fas fa-search"></i></button>
    </EditForm>

    <ul class="nav flex-column">
        <li class="nav-item">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <i class="oi fas fa-home"></i> Home
            </NavLink>
        </li>
        <li class="nav-item">
            <NavLink class="nav-link" href="songslistredirect/1">
                <i class="oi fas fa-music"></i> Songs list
            </NavLink>
        </li>
        @if (this.State.IsLoggedIn)
        {
            <li class="nav-item">
                <NavLink class="nav-link" href="songs/add">
                    <i class="oi fas fa-plus"></i> Add song
                </NavLink>
            </li>
        }
    </ul>

    @if (this.State.IsLoggedIn)
    {
        <span class="text-xs pl-2 font-weight-bold">Hello, @(this.State.Username ?? "user")</span>
        <ul class="nav flex-column">
            <li class="nav-item">
                <NavLink class="nav-link" href="playlists">
                    <i class="oi fas fa-list-ul"></i> Playlists
                </NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="account/logout">
                    <i class="oi fas fa-sign-out-alt"></i> Logout
                </NavLink>
            </li>
        </ul>
    }
    else
    {
        <div class="text-xs pl-2 font-weight-bold">Account</div>
        <span class="text-xs pl-2">When you create your account, you will be able to create your own playlists and view your play history.</span>
        <ul class="nav flex-column">
            <li class="nav-item">
                <NavLink class="nav-link" href="account/login">
                    <i class="oi fas fa-sign-in-alt"></i> Login
                </NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="account/register">
                    <i class="oi fas fa-user-plus"></i> Register
                </NavLink>
            </li>
        </ul>
    }

    <span class="text-xs pl-2 font-weight-bold">Now playing</span> &nbsp; &nbsp;
    <span @onclick="this.MediaPlayer.PlayNext"><i class="fas fa-forward cursor-pointer"></i></span> &nbsp; &nbsp;
    <span @onclick="this.MediaPlayer.ClearPlaylist"><i class="fas fa-trash-alt cursor-pointer"></i></span> &nbsp; &nbsp;
    @if (this.State.IsLoggedIn)
    {
        <NavLink href="playlists/create"><i class="fas fa-save cursor-pointer"></i></NavLink>
    }

    <ol class="playlist">
        @foreach (var playlistItem in this.MediaPlayer.Playlist)
        {
            <li>
                <div>
                    <span class="playlist-item @((playlistItem == this.MediaPlayer.CurrentSong)?"current-playlist-item":string.Empty)" @onclick="() => this.MediaPlayer.AddAndPlay(playlistItem)">
                        @playlistItem.Title
                    </span>
                    <a href="/songsinforedirect/@playlistItem.Id/@playlistItem.Title"><i class="fas fa-info-circle cursor-pointer"></i></a>
                    @if (playlistItem != this.MediaPlayer.CurrentSong)
                    {
                        <span @onclick="() => this.MediaPlayer.RemoveSong(playlistItem)"><i class="fas fa-times cursor-pointer"></i></span>
                    }
                </div>
            </li>
        }
    </ol>
</div>

@code {
    class SearchModel
    {
        public string SearchTerms { get; set; }
    }

    readonly SearchModel searchModel = new SearchModel();
    bool collapseNavMenu = true;

    void ToggleNavMenu()
    {
        this.collapseNavMenu = !this.collapseNavMenu;
    }

    protected override void OnInitialized()
    {
        this.State.OnUserDataChange += this.StateHasChanged;
        this.MediaPlayer.OnChange += this.StateHasChanged;
    }

    void Search()
    {
        this.NavigationManager.NavigateTo($"/songslistredirect/{this.searchModel.SearchTerms}/1");
    }
}
